@import "../common.scss";

body{
	background-color: #fff;
}

.issue{
	padding: 0 ws(30);
	padding-top: 0;
	.details{
		display: flex;
		flex-direction: column;
		@include border-line(#e4e1e1, bottom);
		>  textarea {
			font-size: ws(15);
			border: unset;
			background-color: #fff;
			border-radius: ws(8/2);
			margin-bottom: unset;
			padding: unset;
		}
	}
	.img-wapper {
		display: flex;
		flex-wrap: wrap;
		.preview {
			margin-right: ws(10);
			margin-bottom: ws(10);
			height: ws(95);
			position: relative;
			img {
				width: ws(95);
				height: ws(95);
				object-fit: cover;
				border-radius: ws(8/2); 
			}
		}
		.delete {
			position: absolute;
			top: ws(-6);
			height: ws(20);
			width: ws(20);
			right: ws(-6);
			border-radius: 50%;
			background-color: #000;
			transform: rotate(45deg);
			&::after,
			&::before {
				margin: auto;
				content: '';
				position: absolute;
				background-color: #fff;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
			}
			&::after {
				height: ws(1);
				width: 70%;
			}
			&::before {
				width: ws(1);
				height: 70%;
			}
		}
		.button {
			width: ws(95);
			height: ws(95);
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F3F3F3;
			border-radius: ws(8/2);
			margin-right: 10px;
			> img{
				width: 40%;
			}
		}
	}
	.botton-wapper {
		width: 80%;
		margin: auto;
		margin-top: ws(100);
		height: ws(40);
		box-shadow: 0 ws(-1) 0 0 rgba(0, 0, 0, .1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		color: #fff;
		background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
		border-radius: ws(40);
	}
}